<template>
  <div class="search-results-container">
    <!-- 搜索信息头 -->
    <div class="search-header">
      <el-icon class="search-icon">
        <Search />
      </el-icon>
      <span class="search-title">知识库搜索结果</span>
      <span class="result-count">找到 {{ totalResults }} 个结果</span>
    </div>

    <!-- 错误提示 -->
    <div v-if="error" class="search-error">
      <el-alert
        :title="error"
        type="error"
        :closable="false"
        show-icon
      />
    </div>

    <!-- 查询信息 -->
    <div v-if="query" class="search-query">
      <span class="query-label">查询:</span>
      <span class="query-text">{{ query }}</span>
    </div>

    <!-- 结果列表 -->
    <div v-if="results && results.length > 0" class="results-list">
      <ReferenceCard
        v-for="(result, index) in results"
        :key="`result-${index}`"
        :data="result"
        @view-detail="handleViewDetail"
      />
    </div>

    <!-- 空状态 -->
    <div v-else-if="!error && totalResults === 0" class="empty-state">
      <el-icon class="empty-icon">
        <Search />
      </el-icon>
      <p>没有找到相关结果</p>
    </div>
  </div>
</template>

<script setup>
import { ref, defineProps, defineEmits } from 'vue'
import { Search } from '@element-plus/icons-vue'
import ReferenceCard from './ReferenceCard.vue'

const props = defineProps({
  data: {
    type: Object,
    required: true,
    // data 结构: { query, total_results, results, error }
  }
})

const emit = defineEmits(['view-detail'])

// 从 props.data 中提取数据
const query = ref(props.data?.query || '')
const totalResults = ref(props.data?.total_results || 0)
const results = ref(props.data?.results || [])
const error = ref(props.data?.error || '')

// 处理查看详情事件
const handleViewDetail = (result) => {
  emit('view-detail', result)
}
</script>

<style scoped>
.search-results-container {
  background: var(--el-fill-color-blank);
  border-radius: 0.5rem;
  overflow: hidden;
}

/* 搜索信息头 */
.search-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1rem;
  background: var(--search-header-bg, linear-gradient(135deg, var(--el-color-primary-light-8), var(--el-color-primary-light-9)));
  border-bottom: 1px solid var(--el-border-color-light);
  font-weight: 500;
  color: var(--el-text-color-primary);
}

.search-icon {
  color: var(--el-color-primary);
  font-size: 1.125rem;
  flex-shrink: 0;
}

.search-title {
  font-weight: 600;
  color: var(--el-text-color-primary);
}

.result-count {
  margin-left: auto;
  font-size: 0.875rem;
  color: var(--el-text-color-secondary);
}

/* 错误提示 */
.search-error {
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--el-border-color-light);
}

/* 查询信息 */
.search-query {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1rem;
  background: var(--el-fill-color-light);
  border-bottom: 1px solid var(--el-border-color-light);
  font-size: 0.875rem;
}

.query-label {
  font-weight: 500;
  color: var(--el-text-color-secondary);
  min-width: 50px;
}

.query-text {
  flex: 1;
  color: var(--el-text-color-primary);
  word-break: break-word;
}

/* 结果列表 */
.results-list {
  padding: 0.75rem 1rem;
  max-height: 600px;
  overflow-y: auto;
}

/* 空状态 */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 2rem 1rem;
  color: var(--el-text-color-secondary);
  text-align: center;
}

.empty-icon {
  font-size: 2.5rem;
  color: var(--el-text-color-placeholder);
  margin-bottom: 0.5rem;
  opacity: var(--empty-icon-opacity, 0.5);
}

.empty-state p {
  margin: 0;
  font-size: 0.875rem;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .search-header {
    flex-direction: column;
    align-items: flex-start;
  }

  .result-count {
    margin-left: 0;
    width: 100%;
    text-align: right;
    margin-top: 0.25rem;
  }

  .results-list {
    max-height: 400px;
  }
}
</style>

